<template>
  <div class="workbench">
    <div class="workbench-hello">
      <div class="workbench-hello--left">
        <img height="100" src="@/assets/header-1.svg" />
        <div>
          <h1>{{ getTimeState() }},{{ userName }}!欢迎回来！</h1>
          <p>
            没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。
          </p>
        </div>
      </div>
      <div class="workbench-hello--weather">
        <h1>现在是：{{ curruntTime }}</h1>
        <p>
          天气：<svg class="icon svg-icon" aria-hidden="true">
            <use :xlink:href="`#icon-${weather ? weather.wea_img : ''}`"></use>
          </svg>
          {{ weather.wea }} {{ weather.win }} {{ weather.win_speed }}
        </p>
        <p>
          您当前所在城市：<span>{{ weather.city }}</span>
        </p>
      </div>
    </div>
    <div class="workbench-card">
      <el-row :gutter="20">
        <el-col
          :span="5"
          :offset="1"
          v-for="(card, index) in cardList"
          :key="index"
          class="workbench-card--list"
        >
          <h1>{{ card.title }}</h1>
          <div>
            <svg class="icon svg-icon" aria-hidden="true">
              <use :xlink:href="card.icon"></use>
            </svg>
            <span>{{ card.num }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="workbench-echart">
      <div class="workbench-echart--pic">
        <Pic />
      </div>
      <div class="workbench-echart--bar">
        <Bar />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from "@/store/modules/user";
import axios from "axios";
import moment from "moment";
import data from "./data";
import Pic from "./echart/pic.vue";
import Bar from "./echart/bar.vue";
let useUser = useUserStore();
let { avatar, userName } = storeToRefs(useUser);
let curruntTime = moment(new Date()).format('"YYYY年MM月DD日 HH:ss:mm"');
let weather: any = ref({});
//计算当前时间
const getTimeState = () => {
  // 获取当前时间
  let timeNow = new Date();
  // 获取当前小时
  let hours = timeNow.getHours();
  // 设置默认文字
  let state = ``;
  // 判断当前时间段
  if (hours >= 0 && hours <= 10) {
    state = `早上好!`;
  } else if (hours > 10 && hours <= 14) {
    state = `中午好!`;
  } else if (hours > 14 && hours <= 18) {
    state = `下午好!`;
  } else if (hours > 18 && hours <= 24) {
    state = `晚上好!`;
  }
  return state;
};

//渲染卡片
let cardList = reactive(data.cardList);
onMounted(() => {
  //获取当前IP所在地天气
fetch("https://api.ipify.org?format=json")
  .then((response) => response.json())
  .then((data) => {
    axios
      .get(
        `https://www.yiketianqi.com/free/day?appid=42614775&appsecret=LvoUzE3O&unescape=1&ip=${data.ip}`
      )
      .then((res) => {
        weather.value = res.data;
        switch (weather.value.wea_img) {
          case "yun":
            weather.value.wea_img = "duoyun-2";
            break;
          case "lei":
            weather.value.wea_img = "shandian";
            break;
          case "shachen":
            weather.value.wea_img = "feng";
            break;
          case "wu":
            weather.value.wea_img = "wu";
            break;
          case "bingbao":
            weather.value.wea_img = "yujiaxue";
            break;
          case "xue":
            weather.value.wea_img = "daxue";
            break;
          case "yu":
            weather.value.wea_img = "leiyujiaojia";
            break;
          case "yin":
            weather.value.wea_img = "duoyun-3";
            break;
          case "qing":
            weather.value.wea_img = "qing";
            break;
        }
      });
  });
})
</script>

<style scoped lang="scss">
.workbench {
  width: 100%;
  height: 100%;
  // display: flex;
  align-items: center;
  &-hello {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--ep-color-primary-light-9);
    border-radius: 4px;
    display: flex;
    transition: all 1s;
    &--left {
      height: 150px;
      width: 60%;
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
      h1 {
        font-size: 22px;
        padding: 5px;
        color: var(--ep-color-primary);
      }
      p {
        padding: 5px;
        line-height: 20px;
      }
    }
    &--weather {
      margin-left: 20px;
      padding: 10px;
      .icon {
        width: 30px;
        height: 30px;
      }
      h1 {
        font-size: 16px;
        padding: 5px;
        color: var(--ep-color-primary);
      }
      span {
        font-size: 16px;
        padding: 5px;
        color: var(--ep-color-primary);
      }
      p {
        padding: 5px;
        line-height: 20px;
      }
    }
  }
  &-card {
    width: 100%;
    margin-bottom: 20px;
    &--list {
      height: 100px;
      background-color: #fff;
      border-radius: 4px;
      padding: 20px;
      transition: all 1s;
      // margin-left: 5px;
      background-color: #e9edf2;
      h1 {
        font-size: 16px;
        color: #999;
        margin-bottom: 20px;
      }
      .icon {
        width: 18px;
        height: 18px;
      }
      span {
        color: var(--ep-color-primary);
        font-size: 22px;
        margin-left: 10px;
      }
    }
  }
  &-echart {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    &--pic {
      width: 49%;
      height: 100%;
      border-radius: 4px;
      background-color: var(--ep-color-primary-light-9);
    }
    &--bar {
      width: 49%;
      height: 100%;
      border-radius: 4px;
      background-color: var(--ep-color-primary-light-9);
    }
  }
}
.workbench-hello:hover {
  -webkit-transform: translateY(-4px) scale(1.02);
  -moz-transform: translateY(-4px) scale(1.02);
  -ms-transform: translateY(-4px) scale(1.02);
  -o-transform: translateY(-4px) scale(1.02);
  transform: translateY(-4px) scale(1.02);
  -webkit-box-shadow: 0 14px 24px rgb(0 0 0 / 20%);
  box-shadow: 0 14px 24px #0003;
  z-index: 999;
  border-radius: 4px;
  transition: all 1s;
}
.workbench-card--list:hover {
  -webkit-transform: translateY(-4px) scale(1.02);
  -moz-transform: translateY(-4px) scale(1.02);
  -ms-transform: translateY(-4px) scale(1.02);
  -o-transform: translateY(-4px) scale(1.02);
  transform: translateY(-4px) scale(1.02);
  -webkit-box-shadow: 0 14px 24px rgb(0 0 0 / 20%);
  box-shadow: 0 14px 24px #0003;
  z-index: 999;
  border-radius: 4px;
  transition: all 1s;
}
</style>
